<template>
  <div>
    <el-card>
      <template #header>
        <el-input
          class="search-input"
          placeholder="请输入查询关键字"
          size="normal"
          clearable
          v-model="params.query"
          @clear="searchUserList()"
        >
          <template #append>
            <el-button icon="el-icon-search" @click="searchUserList()"></el-button>
          </template>
        </el-input>
        <el-button type="primary">添加新用户</el-button>
      </template>
      <el-table :data="users" border height="scorll" size="small">
        <template v-slot:empty>
          <el-empty description="查无数据"></el-empty>
        </template>
        <el-table-column
          label="#"
          type="index"
          align="center"
        ></el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="mobile" label="电话"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column label="状态">
          <template #default="{ row }">
            <el-switch v-model="row.mg_state" @change="changeUserState(row,$event)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
            <el-button type="warning" icon="el-icon-setting" size="mini" @click="openUserEdit(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[5, 10, 15, 20, 25, 30]"
        :page-size="params.pagesize"
        :current-page="params.pagenum"
        :total="total"
        @size-change="sizeChangePage"
        @current-change="currentChangePage"
      >
      </el-pagination>
    </el-card>

    <RoleDialog ref="roleDialog" title="账号角色分配" :close-on-click-modal="false" @update:data="loadUserList"></RoleDialog>
  
  </div>
</template>

<script>
import RoleDialog from '@/components/userDialog/RoleDialog.vue'
export default {
  components:{
    RoleDialog
  },
  data() {
    return {
      users: [],
      total:0,
      params:{
        query:"",
        pagenum:1,
        pagesize:5
      }
    };
  },
  methods:{
    openUserEdit(u){
      // this.$refs.roleDialog 二次封装的组件对象
      this.$refs.roleDialog.editUser = u;
      this.$refs.roleDialog.open()
    },
    searchUserList(){
      this.params.pagenum = 1;
      this.loadUserList();
    },
    sizeChangePage(newSize){
      console.log("newSize:",newSize);
      this.params.pagenum = 1;
      this.params.pagesize = newSize;
      this.loadUserList();
    },
    currentChangePage(newPage){
      console.log("newPage:",newPage);
      this.params.pagenum = newPage;
      this.loadUserList();
    },
    async loadUserList(){
      let result = await this.$api.getUserList(this.params)
      // console.log(result);
      this.total = result.total
      this.users = result.users
    },
    async changeUserState(user,nv){
      console.log(user,nv);
      let result = await this.$api.changeUserState({ uid:user.id,type:nv })
      if(result){
        this.$notify({
          title: `"${user.username}"账号已${ nv?"开启":"禁用" }`,
          type: nv?'success':'warning'
        });
        // this.$message.success(`${user.username} 账号 ${ nv?'开启':'禁用' } 成功`)
      }else{
        user.mg_state = !nv;
      }
      console.log(result);
    }
  },
  created(){
    this.loadUserList();
  }
};
</script>

<style lang="less" scoped>
.el-card {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  :deep(.el-card__body) {
    flex-grow: 1;
    padding-bottom: 70px;
    overflow: hidden;
  }
}
// :deep(.el-table__body-wrapper){
//   height: 100%!important;
// }
.el-table{
  height: 100%;
}
.search-input {
  width: 400px;
  margin-right: 20px;
}
.el-pagination {
  padding: 20px;
  text-align: center;
}
</style>